import { useCallback } from 'react'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { AppState, AppDispatch } from '../index'
import {
    increment,
    decrement
} from './actions';

export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector

/**
 * 调用 increment
 */
export const useIncrementCounter = () => {
    const dispatch = useDispatch<AppDispatch>()

    return useCallback(
        () => {
            dispatch(increment())
        },
        [dispatch]
    )
}

/**
 * 调用 decrement
 */
export const useDecrementCounter = () => {
    const dispatch = useDispatch<AppDispatch>()

    return useCallback(
        () => {
            dispatch(decrement())
        },
        [dispatch]
    )
}

/**
 * 获取counter的值
 */
export const useCounter = () => {
    const value = useAppSelector(state => state.counter.value)
    return value
}